<template>
  <el-menu
    class="navbar"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    :router="true"
  >
    <el-menu-item index="1" route="/">Home Page</el-menu-item>
    <el-menu-item index="2" route="/register" v-if="!isLogin"
      >register</el-menu-item
    >
    <el-menu-item index="3" route="/login" v-if="!isLogin">Login</el-menu-item>
    <el-sub-menu index="4" route="/user" v-if="isLogin && user">
      <template #title>
        user
        <span class="overdue" v-show="theNumberOfAll !== 0">{{theNumberOfAll}}</span>
      </template>
      <el-menu-item index="2-1" :route="'/user/' + user.id"
        >user info</el-menu-item
      >
      <template v-if="user.type === 0">
        <el-menu-item index="2-2" route="/admin/manageUser">
          user management
        </el-menu-item>
        <el-menu-item index="2-3" route="/admin/manageBook">
          book management
        </el-menu-item>
        <el-menu-item index="2-8" route="/admin/allBorrow">
          borrow management
        </el-menu-item>
        <el-menu-item index="2-9" route="/history/allReservation">
          all reservation history
        </el-menu-item>
        <el-menu-item index="2-10" route="/history/allBorrow">
          all borrow history
        </el-menu-item>
        <el-menu-item index="2-11" route="/history/allFine">
          all fine history
        </el-menu-item>
      </template>
      <el-menu-item index="2-12" route="/history/myReservation">
        my reservation history
      </el-menu-item>
      <el-menu-item index="2-13" route="/history/myBorrow">
        my borrow history
      </el-menu-item>
      <el-menu-item index="2-14" route="/history/myFine">
        my fine history
      </el-menu-item>
      <el-menu-item index="2-4" route="/borrowBook">
        my borrow
        <span class="overdue" v-show="theNumberOfOverdueBook">{{theNumberOfOverdueBook}}</span>
        <span class="overdue blue" v-show="theNumberOfWillReturn">{{theNumberOfWillReturn}}</span>
      </el-menu-item>
      <el-menu-item index="2-7" route="/reserveBook">
        my reserve
        <span class="overdue" v-show="theNumberOfWillInvalid">{{theNumberOfWillInvalid}}</span>
      </el-menu-item>
      <el-menu-item index="2-5" route="/updatePass">change password</el-menu-item>
      <el-menu-item index="2-6" @click="logout">log out</el-menu-item>
    </el-sub-menu>
  </el-menu>
</template>
<script lang="ts" setup>
import { useUserStore } from "@/stores/user";
import { onMounted, ref, watch } from "vue";
import * as userApi from "@/api/user";
import * as bookApi from "@/api/books";
import { useRouter } from "vue-router";
import type { User } from "@/domain/user";
import { storeToRefs } from "pinia";

const user = ref<User | null>(null);
const store = useUserStore();
let theNumberOfOverdueBook = ref(0);
let theNumberOfWillReturn = ref(0);
let theNumberOfWillInvalid = ref(0);
let theNumberOfAll = ref(0);
onMounted(async () => {
  await bookApi.getOverdueNum().then((data) => {
    theNumberOfOverdueBook.value  = data.num || 0;
  });
  await bookApi.getBookWillReturnNum().then((data) => {
    theNumberOfWillReturn.value  = data.num || 0;
  });
  await bookApi.getReservationWillInvalidNum().then((data) => {
    theNumberOfWillInvalid.value  = data.num || 0;
  });
  theNumberOfAll.value = theNumberOfOverdueBook.value + theNumberOfWillReturn.value + theNumberOfWillInvalid.value;
});

const router = useRouter();
const logout = function () {
  store.userLogout();
  user.value = null;
  router.push({
    //你需要接受路由的参数再跳转
    path: "/",
  });
};

const isLogin = storeToRefs(store).isLogin;
watch(
  () => isLogin.value,
  () => {
    if (isLogin.value) {
      checkUser();
    }
  },
  {
    immediate: true,
  }
);
const checkUser = function () {
  //发送get请求
  userApi
    .checkUser()
    .then((res) => {
      user.value = res;
    })
    .catch(() => {
      store.isLogin = false;
    });
};
</script>
<style scoped>
.overdue {
  transform: scale(0.8);
  width: 20px;
  height: 20px;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  background-color: red;
  border-radius: 50%;
  font-weight: 700;
}
.blue {
  background-color: blue;
}
</style>
